<template>
  <div>
    <van-card
      v-for="(item, index) in list"
        :key="index"
        num="1"
        :price="item.price"
        :desc="item.name"
        :title="`商品ID：`+item.id"
        :thumb="item.picurl[0]"
    >
      <template #tags>
        <van-tag plain type="danger">{{ item.clientname }}</van-tag>
      </template>
    </van-card>
    <div v-if="list.length==0">
      <img
        src="https://m.taoshouyou.com/static/home/static/img/gamelist/loading_c34e539.gif"
        style="display: none"
        id="loading"
      />
      <div id="wrapper" class="order_list clearfix">
        <div id="scroller">
          <ul>
            <li>
              <div class="emptyStatus">
                <img class="img" src="https://m.taoshouyou.com/img/empty.png" />
                <p>目前没有任何订单哦~</p>
                <div></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <van-button v-else type="primary" block to="/coll">去结账</van-button>
  </div>
</template>

<script>
export default {
  computed: {
    list() {
      return this.$store.state.percen.orderlist;
    },
  },
};
</script>
<style src="../../assets/css/commot.css" scoped></style>
<style lang="less" scoped>
.emptyStatus {
  height: 5.5rem;
  text-align: center;
  padding-top: 0.2rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  margin-left: 0.9rem;
}

.emptyStatus .img {
  width: 2rem;
  float: left;
  height: 200px;
  border-radius: 8px;
}
.emptyStatus p {
  color: #898989;
}
.module .check .check_title {
  font-size: 0.1rem;
  width: 14%;
}
.van-card__thumb {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    width: 90px;
    height: 88px;
    margin: 0 20px 5px 10px;
}
</style>